<!DOCTYPE html>
<html lang="zh-CN">
<#include "../common/head.ftl">
<body>
<#--<#include "../common/menu.ftl">-->

<div class="container">
<#--<#include "../common/banner.ftl">-->
    <div class="panel panel-default panel-col">
        <div class="panel-heading">
            <h4 class="text text-info">用户列表</h4>
        </div>
        <div class="panel-body">
            <div style="margin-bottom: 10px;">
                <a class="btn btn-primary" href="/user/toUpdate">添加用户</a>
            </div>


            <p></p>
            <div class="alert alert-success" id="message-alert">
                删除成功
                <button class="close" data-dismiss="alert" id="message-alert-close-btn"><span>&times;</span></button>
            </div>
            <table class="table table-bordered table-striped table-hover">
                <thead class="text-info">
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>年龄</th>
                    <th>出生日期</th>
                    <th>住址</th>
                    <th>性别</th>
                    <th>手机号码</th>
                    <th>头像</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <#list userList as user>
                <tr>
                    <td>${(user.id)!}</td>
                    <td>${(user.username)!}</td>
                    <td>${(user.age)!}</td>
                    <td>${((user.birthday)?string('yyyy-MM-dd'))!}</td>
                    <td>${(user.address)!}</td>
                    <td>${((user.gender == 1)?string('男', '女'))!}</td>
                    <td>${(user.phone)!}</td>
                    <td>
                        <img src="${(user.headimg)!}" width="25" height="25">
                    </td>

                    <td style="width: 150px;">
                        <a class="btn btn-primary" href="/user/toUpdate?id=${(user.id)!}">修改</a>

                        <button type="button" id="btnDelete" class="btn btn-danger" onclick="delUserEnter(${(user.id)!})">删除</button>
                    </td>
                </tr>
                </#list>
                </tbody>
            </table>
        </div>
    </div>

<#--删除确认弹窗-->
    <div class="modal fade" id="del-user-modal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-titile">警告</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <span class="text text-danger">确定要删除这条数据吗？</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" id="del-user-modal-yes">删除</button>
                    <button class="btn btn-primary" id="del-user-modal-no">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<#include "../common/footer.ftl">
<script>
    $('#message-alert').hide();
    //模态框初始化设置
    $('#del-user-modal').modal({
        show: false,
        backdrop: 'static',
        keyboard: false
    });

    var userid;//用户id
    var isdelete = false;//是否删除

    //点击删除按钮弹出模态窗口
    var delUserEnter = function(id){
        $('#del-user-modal').modal('show');
        userid = id;
    }

    //点击确定按钮
    $('#del-user-modal-yes').on('click', function () {
        isdelete = true;
        $('#del-user-modal').modal('hide');
    });

    //点击取消按钮
    $('#del-user-modal-no').on('click', function () {
        isdelete = false;
        $('#del-user-modal').modal('hide');
    });

    //模态窗口关闭之后判断是否要删除数据
    $('#del-user-modal').on('hidden.bs.modal', function(){
        if(isdelete){
            var result = xuser.userDelete(userid);

            if(result) {
                //alert("删除成功")
                //表格顶部弹出操作成功提示框
                $('#message-alert').slideDown(300);

            }else{
                alert("删除失败")
            }
        }
    });

    //关闭删除成功提示框后刷新页面
    $('#message-alert-close-btn').on('click', function(){
        window.location.reload();
    });

    //下拉菜单事件测试-----------------
    /*$('#dropdown').on('show.bs.dropdown', function(){
        alert("下拉菜单展开前调用")
    });
    $('#dropdown').on('shown.bs.dropdown', function(){
        alert("下拉菜单展开后调用")
    });
    $('#dropdown').on('hide.bs.dropdown', function(){
        alert("下拉菜单关闭前调用")
    });
    $('#dropdown').on('hidden.bs.dropdown', function(){
        alert("下拉菜单关闭后调用")
    });*/
    //------------------------------
</script>
</body>
</html>